<template>
  <div>
    <div>
      <h1 v-if=orderSumNum>当日售出额度: &nbsp;{{ orderSumNum }}&nbsp;¥</h1>
      <h1 v-else>当日售出额度: &nbsp;{{ 0 }}&nbsp;¥</h1>
      <h1 v-if=todayNum>当日售出: &nbsp;{{ todayNum }}&nbsp;笔</h1>
      <h1 v-else>当日售出: &nbsp;{{ 0 }}&nbsp;笔</h1>
      <h1>登录成功次数: &nbsp;{{loginSuccessNum}}&nbsp;</h1>
      <h1 v-if=loginFailNum>登录失败次数: &nbsp;{{loginFailNum}}&nbsp;</h1>
      <h1 v-else>登录失败次数: &nbsp;{{0}}&nbsp;</h1>
      <h1>量级: 10PB</h1>

    </div>
    <div id="myChart4" :style="{ width: '1000px', height: '300px' }"></div>
    <div id="myChart" :style="{ width: '1000px', height: '300px' }"></div>
    <div id="myChart2" :style="{ width: '1000px', height: '300px' }"></div>
    <div id="myChart3" :style="{ width: '1000px', height: '300px' }"></div>
  </div>
</template>


<script>
export default {
  name: "hello",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
      productAnalyseAll: [],
      productAnalyseX: [],
      productAnalyseY: [],
      todayNum: 0,
      loginSuccessNum: 0,
      loginFailNum: 0,
      orderSumNum: 0,
    };
  },
  activated() {
    this._productAnalyseAll_()
  },
  mounted() {
    this._productAnalyseAll_()
    this._getLoginSuccess_()
    this._getLoginFail_()
    this._getOrder_()
    this._getOrderSum_()

    this.drawLine();
    this.drawLine2();
    this.drawLine3();
    setTimeout(() => {
      this.drawLine4()
    }, 300)
  },
  methods: {
    _productAnalyseAll_() {
      this.$axios
          .post("/cat/productAnalyse/all", {})
          .then((res) => {
            this.productAnalyseAll = res.data.productAnalyseAll;
            console.log(this.productAnalyseAll)

            console.log(this.productAnalyseAll.length, "this.productAnalyseAll.length")

            for (let i = 0; i < this.productAnalyseAll.length; i++) {
              this.productAnalyseY.push(this.productAnalyseAll[i].num)
              this.productAnalyseX.push(this.productAnalyseAll[i].productName)
            }
            console.log("this.productAnalyseX", this.productAnalyseX, "this.productAnalyseX")
            console.log("this.productAnalyseY", this.productAnalyseY)
          });
    },
    _getLoginSuccess_() {
      this.$axios
          .post("/cat/productAnalyse/login/success", {})
          .then((res) => {
            this.loginSuccessNum = res.data.getLoginSuccess;
          });
    },
    _getLoginFail_() {
      this.$axios
          .post("/cat/productAnalyse/login/fail", {})
          .then((res) => {
            this.loginFailNum = res.data.getLoginFail;
          });
    },
    _getOrder_() {
      this.$axios
          .post("/cat/productAnalyse/order", {})
          .then((res) => {
            this.todayNum = res.data.getOrder;
          });
    },
    _getOrderSum_() {
      this.$axios
          .post("/cat/productAnalyse/order/sum", {})
          .then((res) => {
            this.orderSumNum = res.data.getOrderSum;
          });
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        title: {text: "FlyCat大家都去哪了"},
        tooltip: {},
        xAxis: {
          data: ["当季推荐", "承德市", "宽城县", "平泉市", "丰宁县", "围场"],
        },
        yAxis: {},
        series: [
          {
            name: "QPM",
            type: "bar",
            data: [2000, 3000, 2100, 2100, 3002, 4212],
          },
        ],
      });
    },
    drawLine2() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart2"));
      // 绘制图表
      myChart.setOption({
        title: {text: "用户喜好(浏览日志分析)"},
        tooltip: {},
        xAxis: {
          data: ['避暑山庄', '塞外蟠龙湖', '外八庙', '小布达拉宫', '双塔山', '金山岭长城', '大刀园'],
        },
        yAxis: {},
        series: [
          {
            name: "人数",
            smooth: true,
            type: "line",
            data: [90000211, 20000211, 610000211, 51202211, 43020211, 30000211, 40000121],
          },
        ],
      });
    },
    drawLine3() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart3"));
      // 绘制图表
      myChart.setOption({
        title: {text: "用户喜好(收藏分析)"},
        tooltip: {},
        xAxis: {
          data: ['避暑山庄', '塞外蟠龙湖', '外八庙', '小布达拉宫', '双塔山', '金山岭长城', '大刀园'],
        },
        yAxis: {},
        series: [
          {
            name: "人数",
            smooth: true,
            type: "line",
            data: [90000211, 80000211, 60000211, 51200211, 40020211, 40000211, 40000121],
          },
        ],
      });
    },
    drawLine4() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart4"));
      // 绘制图表
      myChart.setOption({
        title: {text: "用户喜好(订单分析)"},
        tooltip: {},
        xAxis: {
          data: this.productAnalyseX,
        },
        yAxis: {},
        series: [
          {
            name: "人数",
            smooth: true,
            type: "line",
            data: this.productAnalyseY,
          },
        ],
      });
    },
  },
};
</script>


